<script setup lang="ts">
  import { TableInstance } from 'element-plus'
  import { PropType, ref } from 'vue'

  defineOptions({
    name: 'TableFeeStandards',
  })

  const props = defineProps({
    data: {
      type: Array as PropType<Array<OrderFeeStandards>>,
      required: true,
    },
  })

  const emits = defineEmits<{
    (e: 'delete-fee-standard', value: Array<string>): void
    (e: 'selection-change', vlaue: Array<string>): void
  }>()

  // 表格组件实例
  const tableInstance = ref<TableInstance | null>(null)

  // 获取表格选中的数据
  const selecttion = ref<Array<string>>([])

  /**
   * 费用标准选择事件
   * @param {Array<OrderFeeStandards>} feeStandards - 费用标准列表
   */
  const handleSelectFeeStandard = (feeStandards: Array<OrderFeeStandards>) => {
    selecttion.value = feeStandards.map((feeStandard) => feeStandard.id)
    emits('selection-change', selecttion.value)
  }

  /**
   * 删除收费标准
   * @param {OrderFeeStandards} feeStandard - 收费标准对象
   */
  const handleDelFeeSet = (feeStandard: OrderFeeStandards) => {
    if (tableInstance.value) {
      tableInstance.value.clearSelection()
      tableInstance.value.toggleRowSelection(feeStandard, true)
      emits('delete-fee-standard', selecttion.value)
    }
  }
</script>

<template>
  <div class="service-cost-standards-table">
    <el-table
      :border="true"
      :data="props.data"
      ref="tableInstance"
      @selection-change="handleSelectFeeStandard"
    >
      <el-table-column type="selection" width="40" fixed="left" :align="'center'" />
      <el-table-column
        label="序号"
        type="index"
        fixed="left"
        :align="'center'"
        width="50"
      ></el-table-column>
      <el-table-column show-overflow-tooltip prop="name" label="收费标准名称" width="170" />
      <el-table-column show-overflow-tooltip prop="mobileShow" label="移动端显示" width="110">
        <template #default="scope">
          <span v-if="scope.row.mobileShow">显示</span>
          <span v-else>隐藏</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="createTime" label="创建时间" width="130" />
      <el-table-column show-overflow-tooltip prop="updateTime" label="更新时间" width="130" />
      <el-table-column prop="status" label="状态" width="70" :align="'center'" fixed="right">
        <template #default="scope">
          <div class="flex_justify_center">
            <HStatus v-if="!scope.row.status">启用</HStatus>
            <HStatus v-if="scope.row.status" type="info">禁用</HStatus>
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="90">
        <template #default="scope">
          <h-space>
            <router-link :to="`/order/fee/standard/update/${scope.row.id}`">
              <HLink>编辑</HLink>
            </router-link>
            <h-link type="error" @click="handleDelFeeSet(scope.row)">删除</h-link>
          </h-space>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
